<!--
 * @Author: diaowangtao
 * @Date: 2020-09-02 16:59:36
 * @Author: tianjunguo
 * @Date: 2020-09-04 16:59:36
 * @Description: 更改配置
-->

<template>
  <div style="padding-bottom:5rem;">
    <div class="page">
      <page-title :title="title"></page-title>
      <!-- 顶部总金额 -->
      <div class="config_top">
        <div class="config_top_up">
          <div class="config_top_left">{{products.sum}}</div>
          <div class="config_top_right" @click="resetDefaultData()"><i class="iconfont">&#xe676;</i>&nbsp;&nbsp;恢复默认</div>
        </div>
        <div class="config_top_bottom">
          配置总金额
          <span>（万元）</span>
        </div>
      </div>
      <!-- 循环的list -->
      <div v-for="(item,index) in products.classifys" :key="index">
        <div class="content">
          <div class="content_title">
            <div class="content_title_text">{{item.assetClassify}}</div>
            <!-- 箭头icon -->
            <!-- 关闭 -->
            <i class="iconfont content_title_icon" @click="showList(index,item.close)" v-show="item.close" ref="arrow">&#xe623;</i>
            <!-- 展开 -->
            <i class="iconfont content_title_icon" @click="showList(index,item.close)" v-show="!item.close" ref="arrow">&#xe632;</i>
          </div>
          <div class="content_gold">
            <div class="content_gold_left">
              金额
              <span>{{item.assetClassifyMoney}}</span>
            </div>
            <div class="content_gold_left" v-if="item.assetClassify !== '保障类' && item.assetClassify !== '海外类'">
              待分配
              <span>{{todistributed(index)}}</span>
            </div>
            <!-- 没有清空字段隐藏span，请勿隐藏div -->
            <div class="content_gold_right" v-if="item.assetClassify !== '保障类' && item.assetClassify !== '海外类'">
              <span @click="clearUp(index)">清空</span>
            </div>
          </div>
        </div>
        <!-- 可展开的list -->
        <div class="list" ref="list" v-show="item.close">
          <div class="list_title">
            <div class="list_left">产品名称</div>
            <div class="list_center">金额</div>
            <div class="list_right"></div>
          </div>
          <div class="list_content" v-for="(item1,index1) in item.products" :key="index1">
            <div class="list_list">
              <div class="list_left">
                <p>{{item1.projectName}}</p>
              </div>
              <div class="list_center">
                <input type="text" v-model="item1.configMoney" class="list_input" :disabled="item.assetClassify == '保障类' || item.assetClassify == '海外类'"/>
              </div>
              <div class="list_right" :class="{hidden:item.assetClassify == '保障类' || item.assetClassify == '海外类'}">
                <i class="iconfont content_title_icon" style="float:right" @click="deleteLine(index,index1,item.assetClassify)">&#xe672;</i>
              </div>
            </div>
          </div>
          <div class="list_add" v-if="item.assetClassify != '保障类' && item.assetClassify != '海外类'">
            <div @click="addNewProd(true,index)"><i class="iconfont">&#xe65a;</i>添加新产品</div>
          </div>
        </div>
      </div>
      <mt-button class="bottom" size="large">调整完成</mt-button>
      <!-- 蒙层 -->
      <div class="bg" :class="{active:popup}">
        <div class="bgMask" :style="{height:smallHeight}" @click.stop="addNewProd(false)"></div>
        <div class="add_produck" :style="{height:bigHeight}">
          <search-input 
          :searchPrompt="searchPrompt" 
          :searchBtnTxt="searchBtnTxt" 
          :isRightIcon="isRightIcon"
          @searchBtnActive="searchFund"></search-input>
          <!-- <button @click="addNewProd(false)">取消</button> -->
          <div class="produck_out">
            <div>
              <div class="produck" v-for="(item,index) in searchResultProd" :key="index" :class="{produck_noclick:item.isLock}">
                <div class="produck_title">
                  {{item.prodName}}
                </div>
                <div class="produck_content">
                  <div>起投金额：{{item.minAmount}}万</div>
                  <div>锁定期：{{item.lockYear}}年</div>
                </div>
              </div>
            </div>
          </div>


          <mt-button @click="configFinacial" class="bottom" size="large">添加原持仓保留</mt-button>
        </div>
      </div>
      
    </div>
    <message-box ref="messageBox"></message-box>
  </div>
</template>

<script>
import "./changeConfig.less";
export default {
  name: "changeConfig",
  components: {
    //头部导航
    pageTitle: resolve => require(["@src/common/pageTitle/pageTitle"], resolve),
    //搜索框
    searchInput: resolve =>
            require([
                "@src/common/components/searchInput/searchInput"
            ], resolve),
    //弹窗
    messageBox: resolve =>require(["@src/common/components/messageBox/messageBox"], resolve),
  },
  data() {
    return {
      close:true,
      title: "更改配置",
      searchPrompt: "请输入关键字或代码搜索",
      maskShow:false,
      products:{},
      popup:false, //控制添加产品弹窗显示隐藏
      searchBtnTxt:"搜索", //搜索框右侧按钮文字
      bigHeight:null,//弹窗的列表高度(带单位)
      smallHeight:null,//弹窗蒙板高度(带单位)
      clientHeight:null,//视口高度(不带单位)
      isRightIcon:true,//控制搜索icon在搜索框右侧 左侧改成false或者不传
      searchResultProd:[
        {prodName:"（锦绣38号）源乐晟恒晟8号私募证券投资基金（视频见证当面签约）",minAmount:"100",lockYear:"1",isLock:true},
        {prodName:"（锦绣38号）源乐晟恒晟8号私募证券投资基金（视频见证当面签约）",minAmount:"100",lockYear:"1",isLock:false},
        {prodName:"（锦绣38号）源乐晟恒晟8号私募证券投资基金（视频见证当面签约）",minAmount:"100",lockYear:"1",isLock:false},
        {prodName:"（锦绣38号）源乐晟恒晟8号私募证券投资基金（视频见证当面签约）",minAmount:"100",lockYear:"1",isLock:false},
        {prodName:"（锦绣38号）源乐晟恒晟8号私募证券投资基金（视频见证当面签约）",minAmount:"100",lockYear:"1",isLock:false},
      ],//搜索产品展示列表
      defaultData:[],
    };
  },
  computed:{
    // todistributed(index){
    //   // for (let index = 0; index < this.products.classifys.length; index++) {
        
    //   // }
    //   let val = 0;
    //   this.products.classifys[index].products.forEach((item,i)=>{
    //     val += item.configMoney
    //   })
    //   return val
    // }
      //对象属性变化
//     pokerHistory() {
// 　　　　return this.bet.pokerHistory
// 　　}
  },
  watch:{
//     'bet.pokerHistory'(newValue, oldValue) {
// 　　　　console.log(newValue)
// 　　}
  },   
  created(){
    this.searchFund("");
    this.getData()
  },
  mounted(){
    //判断苹果和安卓
    // if( window.appIsIOS ){
    //     this.iosXd = true
    // }else{
    //     this.androidXd = true
    // };
    // 获取浏览器可视区域高度
    this.clientHeight =   `${document.documentElement.clientHeight}`/20;
    this.smallHeight = this.clientHeight - this.clientHeight * .7 + "rem";
    this.bigHeight = this.clientHeight * .7 + "rem";
    // window.onresize = function temp() {
    //   this.clientHeight = `${document.documentElement.clientHeight}`;
    // };
  },

  methods: {
    //计算待分配金额
    todistributed(index){
      let val = 0;
      this.products.classifys[index].products.forEach((item,i)=>{
        val  += Number(item.configMoney)
      })
      return this.products.classifys[index].assetClassifyMoney - val
    },
    resetDefaultData(){
      this.products = this.$utils.objDeepCopy(this.defaultData)
    },
    // 删除该商品
    deleteLine(index,index1,assetClassify){
      // if(assetClassify == '保障类' || assetClassify == '海外类'){
      //   return false;
      // }
      this.products.classifys[index].products.splice(index1,1)
    },
    //清空产品
    clearUp(index){
      this.$refs.messageBox.open({
          message: '是否清空当前资产类别中所有产品和金额？~',
          confirmButtonText: '确定',
          cancelButtonText:'取消'
      });
      this.products.classifys[index].products.splice(0)
    },
    showList(index,close) {
        // this.close = !close;
        this.products.classifys[index].close = !close;
        this.$forceUpdate();//改变值后，由于数组层级太多，所以强制刷新数据。否则页面监听不到
    },
    getData(){
        this.$axiosHttp.http(
          {
              url: apiUrl.echoAssetAllocationProductsApi,
              needFailCallback: true,
              name: "",
              params: {
                  assetAllocationId: ""
              }
          },
          res => {
            //拿到接口返回数据
            this.defaultData = this.$utils.objDeepCopy(res.data.data);
            this.products = res.data.data;
            //设置展开状态，第一个为展开，其他为闭合。
            this.products.classifys.forEach((l, i, a)=>{
              l.todistributed = l.assetClassifyMoney;//设置投资金额
              if(i == 0){
                l.close = true
              }else{
                l.close = false
              }
            })
          },
          res => {
              tipAction(res.data.message);
          }
      )
    },
    //调整完成，保存
    configFinacial(){
      var updateArr = [];
      this.products.classifys.forEach((l, i, a)=>{
        l.products.forEach((l1,i1)=>{
          updateArr.push({
            recommendProductId:l1.assetProductId,
            configMoney:l1.configMoney
          })
        })
      })
      console.log(updateArr);
        
      this.$axiosHttp.http(
        {
            url: apiUrl.updateAssetAllocationProductsApi,
            needFailCallback: true,
            name: "",
            params: {
              assetAllocationId:"123",
              productConfigs:updateArr
            }
        },
        res => {
          //返回预览页
        },
        res => {
            tipAction(res.data.message);
        }
      )
    },
    //添加产品事件
    addNewProd(val,index){
      // this.popup = val;//显示搜索框
      this.products.classifys[index].products.push({
        projectName:"添加产品1",//产品名称
        assetProductId:"123123",//产品id
        configMoney:100,//目标金额
        startingInvestmentAmount:200,//起投金额
      })
    },
    //弹框搜索按钮
    searchFund(searchKeyWords){
      console.log(searchKeyWords,"searchKeyWords");
      //10编辑持仓搜索产品 文档没有接口 没有搜索关键字
      this.$axiosHttp.http({
        url: "",
        method: 'POST',
        needFailCallback: true,
        params: {
            searchKeyWords: searchKeyWords,
            pageNum:1,
            pageSize:10
        },
      }, (res) => {
        console.log(res);
      },res =>{
          // this.$parent.changeLoading(false)
          // 接口失败黑条提示
          this.$toast(res.data.message)
      },res => {
          // this.$parent.changeLoading(false);
          this.loading = false;
      });

    }
  }
};
</script>

<style>
</style>